<template>
  <div>
    <el-row>
      <!-- 左侧侧边栏 -->
      <el-col :span="state.isCollapse == false ? 3 : 1">
        <div style="height:100vh;width:100%;">
          <el-menu
            style="height:100%;font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;"
            @open="handleOpen"
            @close="handleClose"
            :collapse="state.isCollapse"
            text-color="rgb(191, 203, 217)"
            background-color="#304156"
            router
            unique-opened
            active-text-color="pink"
          >
          <!-- default-active="/systemHomePage" -->
            <div style="height:6vh;display:flex;justify-content:flex-start;line-height:7vh;">
              <img src="@/assets/nms.png" style="margin:25px 0 0 24px;width:18px;height:18px;" alt="">
              <div v-if="!state.isCollapse">
                <span style="font-size:14px;margin-left:5px;color:#fff;font-weight:600">顺通养老院</span>
              </div>
            </div>
            <el-menu-item :index="'/systemHomePage'">
              <el-icon><icon-menu /></el-icon>
              <span>系统主页</span>
            </el-menu-item>
            <el-sub-menu index="systemManagement">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item :index="'/userManagement'">用户管理</el-menu-item>
              <el-menu-item :index="'/announcements'">通知公告</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="oldManManagement">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>老人管理</span>
              </template>
              <el-menu-item :index="'/olderManManagement'">老人信息管理</el-menu-item>
              <el-menu-item :index="'/healthManagement'">老人健康管理</el-menu-item>
              <el-menu-item :index="'/familyManagement'">家属信息管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="hospitalityManagement">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>接待管理</span>
              </template>
              <el-menu-item :index="'/consultManagement'">未入院到访管理</el-menu-item>
              <el-menu-item :index="'/visitManagement'">入院老人探访者管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="careManagement">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>护工管理</span>
              </template>
              <el-menu-item :index="'/careMessageManagement'">护工信息管理</el-menu-item>
              <el-menu-item :index="'/careDailyManagement'">护工日常工作管理</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="bedManagement">
              <template #title>
                <el-icon><Document /></el-icon>
                <span>床位管理</span>
              </template>
              <el-menu-item :index="'/bedMessageManagement'">床位信息管理</el-menu-item>
            </el-sub-menu>
            
          </el-menu>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="state.isCollapse == false ? 21 : 23">
        <div style="box-sizing:border-box;">
          <div style="height:4vh;display:flex;justify-content:space-between;background:#F8F8FF">
            <div style="cursor:pointer;height:100%;width:60px;" @click="handleIsCollapse">
              <el-icon v-if="state.isCollapse == false" style="margin-left:20px;margin-top:12px"><DArrowLeft /></el-icon>
              <el-icon v-if="state.isCollapse == true" style="margin-left:20px;margin-top:12px"><DArrowRight /></el-icon>
            </div>
            <div style="line-height:4vh;margin-right:12px;cursor:pointer;" @click="handleLoginOut">
              <span>退出登录</span>
            </div>
          </div>
          <div style="height:4vh;">
            <div style="background:#DCDCDC;height:100%;">
              <el-breadcrumb separator="/" style="line-height:4vh;margin-left:10px;font-size:12px;" v-if="state.childrenBreadCrumb || state.parentBreadCrumb">
                <el-breadcrumb-item v-if="state.parentBreadCrumb">{{state.parentBreadCrumb}}</el-breadcrumb-item>
                <el-breadcrumb-item v-if="state.childrenBreadCrumb" :to="{path:`${state.childrenPath}`}">{{state.childrenBreadCrumb}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
          </div>
          <div style="background-color:#F8F8FF;height:92vh;">
            <router-view></router-view>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive , onMounted , watch} from 'vue'
import {useRoute , useRouter} from 'vue-router'
import router from '../../router/index'
import {
  Location,
  Document,
  Setting,
  Menu as IconMenu,
  DArrowLeft,
  DArrowRight,
} from '@element-plus/icons-vue'

export default defineComponent({
  components:{
    Location,
    Document,
    Setting,
    IconMenu,
    DArrowLeft,
    DArrowRight,
  },
  
  setup() {
    // const icon = {}
    const state = reactive({
      isCollapse:false as Boolean,
      childrenBreadCrumb:'' as string,//选中的子级菜单名称
      parentBreadCrumb:'' as String,//选中的父级菜单名称
      childrenPath:'' as string,//选中的子级菜单path
    })
    
    const handleOpen = (key: string, keyPath: string[]):void => {
      // console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]):void => {
      // console.log(key, keyPath)
    }
    const handleIsCollapse = ():void => {
      state.isCollapse = !state.isCollapse
    }
    // 退出登录
    const handleLoginOut = ():void => {
      window.location.href = '/login'
    }
    // const getBreandCrumb = () => {
    //   let breadMatched = useRoute().matched.filter(item => item.name)[0]
      
    //   state.levelList = breadMatched
      
    // }
    // onMounted(()=>{
    //   getBreandCrumb()
    // })
    watch(
      ()=>router.currentRoute.value,
      (val)=>{
        console.log(val);
        // 因val.meta.title和val.meta.parent为unknown类型，如果不对其进行类型的控制流细化或类型断言则不能赋值给string类型
        // if(typeof val.meta.title === 'string' && typeof val.meta.parent === 'string'){
        //   state.childrenBreadCrumb = val.meta.title
        //   state.parentBreadCrumb = val.meta.parent
        // }
        state.childrenBreadCrumb = val.meta.title as string
        state.parentBreadCrumb = val.meta.parent as string
        state.childrenPath = val.path
      }
    )
    
    return {
      state,
      handleOpen,
      handleClose,
      handleIsCollapse,
      handleLoginOut,
      // getBreandCrumb,
    }
  },
})
</script>

<style lang="scss" scoped>
</style>
